//
//                  江城子 . 程序员之歌
//
//              十年生死两茫茫，写程序，到天亮。
//                  千行代码，Bug何处藏。
//              纵使上线又怎样，朝令改，夕断肠。
//
//              领导每天新想法，天天改，日日忙。
//                  相顾无言，惟有泪千行。
//              每晚灯火阑珊处，夜难寐，加班狂。
//




// 去除默认值
* {
	margin: 0px;
	padding: 0px;
}

button {
	background:#50BE91; //可根据自己的背景颜色自行设置
	border-radius: 0rpx;
	padding: 0rpx;
	margin: 0rpx;
	display: inline-block;
	line-height: 1;
	margin-left: 0;
	margin-right: 0;
}

button::after {
	/*button的边框样式是通过::after方式实现的*/
	border: none;
	margin: 0;
}

image {
	width: 100%;
	height: 100%;
}

// 常用的width

.wrap {
	wwidth: 92%;
    padding:0 4% 100rpx;	
}
.centered {
	height: auto;
	width: 690rpx;
	margin: 0 auto;
}
.dis-block{
	display: block;
}
.b-line{
	border-bottom: 1px solid #EEEEEE;
}
.line{
border: 1px solid #EEEEEE;
}
/**
 * 分割线
 */
.splite-line-solid {
  height: 1px;
  border: none;
  border-top:1px solid #f1f1f1;
  margin: 15upx;
}
// 盒子模型

.flex {
	display: flex;
	flex-wrap: wrap;

}

.jcsb {
	justify-content: space-between;
}

.jcc {
	justify-content: center;
}

.jce {
	justify-content: flex-end;
}

.aic {
	align-items: center;
}

.aie {
	align-items: flex-end;
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.flex-3 {
	flex: 3;
}

.flex-4 {
	flex: 4;
}

.flex-5 {
	flex: 5;
}

.flex-6 {
	flex: 6;
}

.flex-7 {
	flex: 7;
}

.flex-8 {
	flex: 8;
}

.flex-9 {
	flex: 9;
}


// 字体颜色

.main-color {
	color: #F4421A;
}
.fc-5c9{
	color:#5C9DD6;
}
.fc-f1a{
	color:#F1AF2A;
}
.fc-ec{
	color: #EC7571;
}
.fc-84{
	color: #84C0F4;
}
.fc-e4b{
	color: #E4BFA2;
}
.fc-dc4{
	color:#DC4141;
}
.fc-ff {
	color: #ffffff;
}
.fc-66 {
	color: #666666;
}
.fc-00 {
	color: #000000;
}
.fc-b2{
	color: #B2B2B2;
}
.fc-66 {
	color: #666666;
}
.fc-99{
	color: #999999;
}
.fc-33{
	color: #333333;
}
.fc-df5{
	color: #DF5353;
}
.fc-52c{
	color: #52C83D;
}
// 字体大小
.fs-22 {
	font-size: 22rpx;
}

.fs-24 {
	font-size: 24rpx;
}

.fs-26 {
	font-size: 26rpx;
}

.fs-28 {
	font-size: 28rpx;
}

.fs-32 {
	font-size: 32rpx;
}

.fs-34 {
	font-size: 34rpx;
}

.fs-36 {
	font-size: 36rpx;
}

.fs-40 {
	font-size: 40rpx;
}
.fs-50{
	font-size: 50rpx;
}
.fs-60 {
	font-size: 60rpx;
}

.fs-80 {
	font-size: 80rpx;
}

.fs-100 {
	font-size: 100rpx;
}


// 文字常用class
.text-tc {
	text-align: center;
}

.text-tr {
	text-align: right;
}

.text-fw {
	font-weight: bold;
}



// 背景颜色

.bg-ff {
	background: #ffffff;
}

.main-bj{
	background: linear-gradient(-40deg, #ED3F25 0%, #F05931 100%); //可根据自己的背景颜色自行设置
	
}
.bg-f4{
	background: #F4F4F4;
}


.cl-both {
	clear: both;
}

.hide {
	display: none;
}


// 动画
.ts-2 {
	transition: all 0.2s;
}

.ts-3 {
	transition: all 0.3s;
}


// 超出
.one-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.two-ellipsis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
// 没有数据的class
.no-collect{
	display: block;
	width: 500rpx;
	height: 500rpx;
	margin: 50rpx auto;
}


// 按钮
.cancel{
	width: 190rpx;
	height: 73rpx;
	border-radius: 40rpx;
	line-height: 73rpx;
	text-align: center;
	border: 1px solid #C9C9C9;
	background-color: #fff;
	color: #555;
	font-size: 28rpx;
}
.confirm{
	width: 190rpx;
	height: 73rpx;
	border-radius: 40rpx;
	line-height: 73rpx;
	background: linear-gradient(-40deg, #ED3F25 0%, #F05931 100%);
	color: #FFFFFF;
	font-size: 28rpx;
	text-align: center;
}
.f-confirm{
	width: 100%;
	height: 80rpx;
	border-radius: 40rpx;
	line-height: 80rpx;
	background: #86bff5;
	color: #FFFFFF;
	font-size: 28rpx;
	text-align: center;
}
.button{
	display: inline-block;
	width: 75px;
	height: 31px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	line-height: 30px;
	background: #FFF5F3;
	border: 1px solid #FF8064;
}
.button-red{
	display: inline-block;
	width: 75px;
	height: 33px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	line-height: 33px;
	background: linear-gradient(-40deg, #ED3F25 0%, #F05931 100%);
}



// 常用css

.mar-top-5 {
	margin-top: 5rpx;
}

.mar-top-10 {
	margin-top: 10rpx;
}

.mar-top-15 {
	margin-top: 15rpx;
}

.mar-top-20 {
	margin-top: 20rpx;
}

.mar-top-25 {
	margin-top: 25rpx;
}

.mar-top-30 {
	margin-top: 30rpx;
}

.mar-top-35 {
	margin-top: 35rpx;
}

.mar-top-40 {
	margin-top: 40rpx;
}
.mar-top-48{
	margin-top: 48rpx;
}
.mar-top-60 {
	margin-top: 60rpx;
}

.mar-top-100 {
	margin-top: 100rpx;
}

.mar-left-5 {
	margin-left: 5rpx;
}

.mar-left-10 {
	margin-left: 10rpx;
}

.mar-left-15 {
	margin-left: 15rpx;
}

.mar-left-20 {
	margin-left: 20rpx;
}

.mar-left-25 {
	margin-left: 25rpx;
}

.mar-left-30 {
	margin-left: 30rpx;
}

.mar-left-35 {
	margin-left: 35rpx;
}

.mar-left-40 {
	margin-left: 40rpx;
}

.mar-right-5 {
	margin-right: 5rpx;
}

.mar-right-10 {
	margin-right: 10rpx;
}

.mar-right-15 {
	margin-right: 15rpx;
}

.mar-right-20 {
	margin-right: 20rpx;
}

.mar-right-25 {
	margin-right: 25rpx;
}

.mar-right-30 {
	margin-right: 30rpx;
}
.pad-bot-0{
	padding-bottom: 0!important;
}
.mar-bot-42{
	margin-bottom: 42rpx;
}
.height-20 {
	width: 100%;
	height: 20rpx;
	line-height: 20rpx;
}

.height-25 {
	width: 100%;
	height: 25rpx;
	line-height: 25rpx;
}

.height-30 {
	width: 100%;
	height: 30rpx;
	line-height: 30rpx;
}

.height-35 {
	width: 100%;
	height: 35rpx;
	line-height: 35rpx;
}

.height-40 {
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
}

.height-45 {
	width: 100%;
	height: 45rpx;
	line-height: 45rpx;
}

.height-50 {
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
}

.height-55 {
	width: 100%;
	height: 55rpx;
	line-height: 55rpx;
}

.height-60 {
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
}

.height-65 {
	width: 100%;
	height: 65rpx;
	line-height: 65rpx;
}

.height-70 {
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
}


.height-80 {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
}

.height-100 {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
}

.pad-top-5{
        padding-top: 5rpx;
}
.pad-top-10{
        padding-top: 10rpx;
}
.pad-top-15{
        padding-top: 15rpx;
}
.pad-top-20{
        padding-top: 20rpx;
}
.pad-top-25{
        padding-top: 25rpx;
}
.pad-top-30{
        padding-top: 30rpx;
}
.pad-left-5{
        padding-left: 5rpx;
}
.pad-left-10{
        padding-left: 10rpx;
}
.pad-left-15{
        padding-left: 15rpx;
}
.pad-left-20{
        padding-left: 20rpx;
}
.pad-left-25{
        padding-left: 25rpx;
}
.pad-left-30{
        padding-left: 30rpx;
}
.pad-right-5{
        padding-right: 5rpx;
}
.pad-right-10{
        padding-right: 10rpx;
}
.pad-right-15{
        padding-right: 15rpx;
}
.pad-right-20{
        padding-right: 20rpx;
}
.pad-right-25{
        padding-right: 25rpx;
}
.pad-right-30{
        padding-right: 30rpx;
}
.iconfont{
	
}
.dis-i-block{
	display: inline-block;
}
/* 顶部导航自定义样式 */
.page-suspension {
	background-color: #eee;
	position: relative;
	width: 100%;
	height:480rpx;
	.topheader{
		height:160rpx;
		position: relative;
		width: 100%;
		z-index: 10;
	}
	//背景图片
	.page-suspension-bj {
		background-image: url('https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/bj.png');
		background-size: 100%;
		width: 100%;
		// position: absolute;
		height:452rpx;
		// left: 25%;
		// top: 0%;
		// transform: translate(-25%, 0);
		z-index: 1;
		
	}
	/* 标题要居中 */
	.nav-title {
		position: absolute;
		z-index: 2;
		left: 44%;
		top: 68rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
	}
	.nav-capsule {
		position: absolute;
		z-index: 2;
		left: 16rpx;
		line-height: 260rpx;
		display: inline-block;
		width:120rpx;
		height: 60rpx;
		top:0rpx;
		.back-pre{
			width:45rpx;
			height:45rpx;
			transform:rotate(-180deg);
		}
	}
}
/* 自定义导航 */
.top_bgimg{width: 100%;position: fixed;top: 0;left: 0;z-index: 2;background-size: 100%;color: black;font-size: 32rpx;}
.top_cont{align-items: center;padding: 20rpx;box-sizing: border-box;text-align: center;padding-top: 30rpx;}
.top_cont image{width: 45rpx;height:45rpx;float: left;margin:0rpx 10rpx 0 0;transform:rotate(-180deg);display: inline-block;}
